<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta  charset="utf-8"  name="viewport" content="width=device-width, initial-scale=1.0">
      
      <!-- 新 Bootstrap 核心 CSS 文件 -->
	  <!-- <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
	 <link href="${BASE}/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
	 <link href="${BASE}/bootstrap-3.3.7/css/bootstrap-table.css" rel="stylesheet">
 
	<!-- 可选的Bootstrap主题文件（一般不使用） -->
	<!-- <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>-->
 	<script src="${BASE}/bootstrap-3.3.7/css/bootstrap-theme.min.css"></script>
 
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<!-- <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> -->
	<script src="${BASE}/scripts/jquery.min.js"></script> 
 
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<!-- <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
	<script src="${BASE}/bootstrap-3.3.7/js/bootstrap.min.js"></script>
	
	<script src="${BASE}/bootstrap-3.3.7/js/bootstrap-paginator.min.js"></script>
	<script src="${BASE}/bootstrap-3.3.7/js/bootstrap-table.js"></script>
	<script src="${BASE}/bootstrap-3.3.7/js/bootstrap-table-zh-CN.js"></script>
	
      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<nav class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
					 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">Brand</a>
				</div>
				
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li class="active">
							 <a href="#">Link</a>
						</li>
						<li>
							 <a href="#">Link</a>
						</li>
						<li class="dropdown">
							 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								<li>
									 <a href="#">Action</a>
								</li>
								<li>
									 <a href="#">Another action</a>
								</li>
								<li>
									 <a href="#">Something else here</a>
								</li>
								<li class="divider">
								</li>
								<li>
									 <a href="#">Separated link</a>
								</li>
								<li class="divider">
								</li>
								<li>
									 <a href="#">One more separated link</a>
								</li>
							</ul>
						</li>
					</ul>
					<form class="navbar-form navbar-left" role="search">
						<div class="form-group">
							<input type="text" class="form-control" />
						</div> <button type="submit" class="btn btn-default">Submit</button>
				</div>
				
			</nav>
			<div class="jumbotron">
            	<div class="col-md-12">
					<table class="table">
						<caption>订单列表</caption>
						<thead>
							<tr>
								<th>订单编号</th>
								<th>下单时间</th>
								<th>订单状态</th>
								<th>订单总数量</th>
								<th>订单总金额</th>
								<th>订单优惠金额</th>
								<th>发票抬头</th>
								<th>付款时间</th>
								<th>备注</th>
								<th>更新时间</th>
							</tr>
						</thead>
						<tbody>
							<#list orderList as order >
							
								<#if order_index%2==0 > 
									   <tr class="active">
								<#else>  
										<tr class="success">
								 </#if>
										<td>${order.orderNo}</td>
										<td>${order.createTime ? string('yyyy-MM-dd')}</td>
										<td>${order.status}</td>
										<td>${order.quantity}</td>
										<td>${order.totalAmount}</td>
										<td>${order.discount}</td>
										<td>${order.invoiceTitle}</td>
										<td>${order.createTime ?string('yyyy-MM-dd')}</td>
										<td>${order.mark}</td>
										<td>${order.lastUpdate ?string('yyyy-MM-dd')}</td>
									</tr>
							</#list>
						</tbody>
					</table>
					
					
		 <div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>
					<script type="text/javascript">
							$('#pageLimit').bootstrapPaginator({    
							    currentPage: 1,    
							    totalPages: 10,    
							    size:"normal",    
							    bootstrapMajorVersion: 3,    
							    alignment:"right",    
							    numberOfPages:5,    
							    itemTexts: function (type, page, current) {        
							        switch (type) {            
							        case "first": return "首页";            
							        case "prev": return "上一页";            
							        case "next": return "下一页";            
							        case "last": return "末页";            
							        case "page": return page;
							        }
							    }
							});
					</script>	

           
			</div>
		</div>
		
		
		

	  
       <div id="toolbar_screen">
        <a href="javascript:void(0);" class="btn btn-primary btn-xs" onclick="resource_addWindow('');"><i class="icon iconfont">&#xe611;</i>新增</a>
        <a href="javascript:void(0);" class="btn btn-danger btn-xs" onclick="wf.resource_delete();"><i class="icon iconfont">&#xe612;</i>删除</a>
       </div>
     	 <table id="screenTable" class="table-striped table-hover" data-mobile-responsive="true" data-toggle="table" data-pagination="true"  
	       data-show-refresh="true"  
	       data-show-toggle="true"  
	       data-showColumns="true">
  		</table>
		
	<script type="text/javascript">
		$(function () {
				//先销毁表格  
	        	$('#screenTable').bootstrapTable('destroy');  
				$('#screenTable').bootstrapTable({
						url: "/website/web/order/list.do",
						dataField: "orderList",
						cache: false, //是否使用缓存，默认为true
						striped: true, //是否显示行间隔色
						pagination: true, //是否显示分页
						pageSize: 10, //每页的记录行数
						pageNumber: 1, //初始化加载第一页，默认第一页
						pageList: [10, 20, 50], //可供选择的每页的行数
						search: true, //是否显示表格搜索
						showRefresh: true, //是否显示刷新按钮
						showColumns:true,
						clickToSelect: true, //是否启用点击选中行
						dataType: "json",//期待返回数据类型
			            method: "post",//请求方式
						toolbar: "#toolbar_screen", //工具按钮用哪个容器
						smartDisplay: false,//智能显示分页按钮
						paginationPreText: "上一页",
						paginationNextText: "下一页",
						sidePagination: "server", //分页方式：client客户端分页，server服务端分页
						queryParamsType: "limit", //查询参数组织方式
						columns: [{
							field: "orderId",
							title: "订单ID",
							align: "center",
							valign: "middle"
						}, {
							field: "orderNo",
							title: "订单编号",
							align: "center",
							valign: "middle",
							formatter: 'infoFormatter'
						}, {
							field: "createTime",
							title: "创建时间",
							align: "center",
							valign: "middle"
						}],
						formatNoMatches: function () {
							return '无符合条件的记录';
						}
					});
					$(window).resize(function () {
						$('#screenTable').bootstrapTable('resetView');
					});
			});
			function infoFormatter(value, row, index) {
				return '<a href=/screen/' + row.orderId + ' target="_blank">' + row.orderNo + '</a>';
			}
	</script>		
		
	</div>
	<div class="row clearfix">
		<div class="col-md-4 column">
			<h2>
				Heading
			</h2>
			<p>
				Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
			</p>
			<p>
				 <a class="btn" href="#">View details »</a>
			</p>
		</div>
		<div class="col-md-4 column">
			<h2>
				Heading
			</h2>
			<p>
				Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
			</p>
			<p>
				 <a class="btn" href="#">View details »</a>
			</p>
		</div>
		<div class="col-md-4 column">
			<h2>
				Heading
			</h2>
			<p>
				Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
			</p>
			<p>
				 <a class="btn" href="#">View details »</a>
			</p>
		</div>
	</div>
</div>
 
   </body>
</html>
